import { createRouter, createWebHistory } from 'vue-router';
import type {
  RouteLocationNormalized,
  RouteRecordRaw,
  NavigationGuardNext
} from 'vue-router';

// 定义路由元信息的类型
interface MetaInterface {
  transition: 'fade' | 'slide-up' | 'slide-right';
}

// 扩展 RouteMeta 接口
declare module 'vue-router' {
  interface RouteMeta extends MetaInterface {}
}

// 定义路由配置
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/layout/default-layout.vue'),
    children: [
      {
        path: '',
        component: () => import('@/views/home/IndexPage.vue'),
        meta: { transition: 'fade' }
      },
    ],
  },
  {
    path: '/detail/:slug',
    name: 'Detail',
    component: () => import('@/views/detail/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/archived',
    name: 'Archived',
    component: () => import('@/views/archived/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/about/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/timeline',
    name: 'Timeline',
    component: () => import('@/views/timeline/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/category/:slug',
    name: 'Category',
    component: () => import('@/views/category/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/search',
    name: 'Search',
    component: () => import('@/views/search/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/update',
    name: 'Update',
    component: () => import('@/views/update/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/reset-password',
    name: 'Reset',
    component: () => import('@/views/reset/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/links',
    name: 'Links',
    component: () => import('@/views/links/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/albums',
    name: 'Albums',
    component: () => import('@/views/albums/IndexPage.vue'),
    meta: { transition: 'slide-right' }
  },
  {
    path: '/albums/verify/:id',
    name: 'AlbumVerify',
    component: () => import('@/views/albums/verify.vue')
  },
  {
    path: '/albums/:id',
    name: 'AlbumDetail',
    component: () => import('@/views/albums/detail.vue')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/not-found/indexPage.vue')
  },
  {
    path: '/error',
    name: 'error',
    component: () => import('@/views/error/indexPage.vue')
  },
  {
    // 捕获所有未匹配的路由
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  }
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior: () => ({
    top: 0,
    behavior: 'instant' as ScrollBehavior
  })
});

// 路由守卫类型定义更准确
router.beforeEach(
  (
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ) => {
    // 设置过渡效果
    const setTransition = (transition: MetaInterface['transition']) => {
      to.meta.transition = transition;
    };

    // 根据路径设置过渡效果
    if (to.path.includes('/detail')) {
      setTransition('slide-right');
    } else if (from.path.includes('/detail')) {
      setTransition('slide-right');
    } else if (to.path.includes('/category') || from.path.includes('/category')) {
      setTransition('slide-up');
    } else {
      setTransition('fade');
    }

    next();
  }
);

// 全局错误处理
router.onError((error) => {
  router.push({
    name: 'error'
  });
  throw error;
});

export default router;
